<template>
  <div>
    <div class="action">
      <n-space>
        <n-button ghost type="primary" size="small">
          <template #icon>
            <n-icon>
              <AddCircle></AddCircle>
            </n-icon>
          </template>
        </n-button>
       
      </n-space>
    </div>
    <div class="inputSearch">
      <n-input v-model:value="pattern" round placeholder="搜索">
        <template #suffix>
          <n-icon :component="FlashOutline" />
        </template>
      </n-input>
    </div>

    <div class="treebox">
      <n-tree
        block-line
        :data="data"
        :pattern="pattern"
        :node-props="nodeProps"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h, computed } from 'vue'
import { useMessage, NIcon, TreeOption } from 'naive-ui'
import { FlashOutline } from '@vicons/ionicons5'
import { Reader,AddCircle} from '@vicons/ionicons5'
const message = useMessage()
import {
useReportStore
} from '@/views/Bi/store/useReportStore'
import { PageEnum } from '@/enums/pageEnum'
import { DataBase } from '@/views/Bi/store/chartEditStore/chartEditStoreBi.d'
const pattern = ref('')
const reportStore = useReportStore()
const data = computed(()=>{
  return   reportStore.getDataBase.map(res=>{
    return   {
    key: res.id,
    label: res.name,
    dataBase:res,
    prefix: () =>
      h(NIcon, null, {
        default: () => h(Reader)
      })
  }
  })
})
const targetData:any = ref(reportStore.getTargetDataBase)

const nodeProps = ({ option }: { option:any }) => {
  return {
    onClick() {
      if (!option.children && !option.disabled) {
          reportStore.setTargetDataBase(option.dataBase)
        //  写入右侧面包屑
        //
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.action {
  margin: 10px 10px 0;
}
.inputSearch {
  margin: 10px 10px 0;
}
.treebox {
  margin-top: 10px;
}
</style>
